<!-- 户号 -->
<template>
	<view class="home-top-dom" :style="{backgroundImage: 'url('+PURETOPBG+')', paddingTop: customBar1 + 'px'}">
		<uni-row style="padding-top: 30px;">
			<uni-col :span="20" :offset="2" class="t-c">
				<image src="@/static/img/logo.png" mode="heightFix" style="height: 70rpx;"></image>
			</uni-col>
			<uni-col :span="2" class="t-r">
				<navigator url="/pages/tabBar/bspsd/user/index" open-type="switchTab" hover-class="none">
					<image src="@/static/img/icon/user3.png" mode="heightFix" style="height: 40rpx;"></image>
				</navigator>
			</uni-col>
		</uni-row>
		<swiper circular class="home-swiper-container" :indicator-dots="true" indicator-active-color="#1989fa">
			<swiper-item class="my-swiper-item" v-for="(item,index) in listData" :key="index">
				<view class="home-swiper__item-container" @click="clickItem(item)"
					:style="{backgroundImage: 'url('+TOPCARDBG+')'}">
					<view>用电户号：{{item.yhbh}}</view>
					<view>用户名称：{{item.yhmc}}</view>
					<view>
						<text>预存余额： </text>
						<text style="color: #328e08;">{{item.dqjy}}</text>
						<!-- <small style="color: #328e08;">{{item.dqjy}}</small> -->
					</view>
					<view>
						<text class="pr20">欠 电 费 ： {{item.dqqf}} </text>
						<uni-tag v-if="item.dqqf > 0" size="mini" text="缴费" type="warning" />
					</view>
				</view>
			</swiper-item>
			<swiper-item class="my-swiper-item">
				<navigator url="/pages/bspsd/user/accountNumber/add" hover-class="none">
					<view  class="home-swiper__item-container t-c " style="padding-top: 30px; line-height: 50px; "
						:style="{backgroundImage: 'url('+TOPCARDBG+')'}">
						<uni-icons type="plusempty" size="28" color="rgba(85, 85, 85, 0.78"></uni-icons>
						<view>绑定户号</view>
					</view>
				</navigator>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { PURETOPBG } from "./pure-top-bg";
	import { TOPCARDBG } from "./top-card-bg";

	import { HlwYxyh } from "@/api/tables/HlwYxyh";
	import { getPhone } from "@/utils/storage";
	import { GetHuHaoByPhone } from "@/api/request/GetHuHaoByPhone";
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	// let imageURL = ref('../../../../static/img/home/top-card-bg.png')
	// let imageURL1 = ref('../../../../static/img/home/pure-top-bg.png')
	let listData = ref<Array<HlwYxyh>>([]);

	let statusBar1 = ref(0)
	let customBar1 = ref(0)
	let navbar1 = ref(0)

	onShow(() => {
		uni.getSystemInfo({
			success: (e : any) => {
				let statusBar = 0  //状态栏高度
				let customBar = 0  // 状态栏高度 + 导航栏高度  
				let navbar = 0 // 自定义标题与胶囊对齐高度

				// #ifdef MP
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight + 45
				// #endif


				// #ifdef MP-WEIXIN
				statusBar = e.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar = custom.bottom + custom.top - e.statusBarHeight
				navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
				// #endif


				// #ifdef MP-ALIPAY
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight + e.titleBarHeight
				// #endif


				// #ifdef APP-PLUS
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight
				// #endif


				// #ifdef H5
				statusBar = 0
				customBar = e.statusBarHeight
				// #endif
				statusBar1.value = statusBar
				customBar1.value = customBar
				navbar1.value = navbar

			}
		})
		getListData()
	})
	// onBeforeMount(() => {
	// 	getListData()
	// })
	
	function getListData() {
		GetHuHaoByPhone({
			data: {
				dlzh: getPhone(),
				bdzt: '0'
			},
			success: (res) => {
				listData.value = res
			},
			fail: (code, message) => {
				console.log(code, message)

			}
		})
	}
	
	// function addClik(){
	// 	uni.navigateTo({
	// 		url: '/pages/bspsd/user/accountNumber/add',
	// 		success: () => {
	// 			uni.$once('addUpdate', () => {
	// 				getListData()
	// 			})
	// 		}
	// 	})
	// }

	function clickItem(item : HlwYxyh) {
		if (item.dqqf > 0) {
			uni.navigateTo({
				url: '/pages/bspsd/business/payfees/payover?yhbh=' + item.yhbh
			});
		} else {
			uni.navigateTo({
				url: '/pages/bspsd/business/payfees/index?yhbh=' + item.yhbh
			});
		}
	}
</script>

<style lang="scss" scoped>
	.home-top-dom {
		position: relative;
		padding: 10px 10px;
		overflow: hidden;
		background-position: center top;
		background-size: 100% 90%;
		background-attachment: fixed;
		background-repeat: no-repeat;
		// background-image: url('@/static/img/home/pure-top-bg.png');



		.home-swiper-container {
			.my-swiper-item {
				display: block;
				padding: 10rpx;
				touch-action: none;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				line-height: 1.5;
				font-size: 14px;
				margin-bottom: 10px;
				color: rgba(85, 85, 85, 0.78);
				font-family: 微软雅黑;
				font-weight: normal;

				.home-swiper__item-container {
					padding: 16px 20px;
					height: 140px;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 8px;
					box-shadow: 1px 2px 10px -5px rgba(208, 88, 44, 0.3);
					// background-image: url('@/static/img/home/top-card-bg.png');
					background-size: 130px;
					background-position: right 10px;
					background-position: calc(100% - 10px) 20px;
					background-repeat: no-repeat;

					.price {
						color: #328e08;
						text-shadow: 0px 1px #fff;
					}
				}
			}
		}
	}
</style>